<template>
	<v-content ref="content" background="#f9f9f9" single>
		<v-header title="意见反馈" back background="#fff"></v-header>
		<div class="tip padding">请选择你在闪退或卡顿、界面异常中遇到的问题</div>
		<div class="list padding">
			<div
				class="item"
				:class="{ active: type == item.code }"
				@click="onchangeType(item.code)"
				v-for="item in typeList"
				:key="item.code"
			>
				{{ item.name }}
			</div>
		</div>
		<div class="feeddes">
			<div class="feedtext">
				问题/意见描述
				<p>{{ form.content.length }}/200</p>
			</div>
			<div class="textarea">
				<textarea
					v-model="form.content"
					placeholder-style="color:#bebebe"
					placeholder="请填写10字以上的问题描述，以便我们更好地帮助您解决问题"
					maxlength="200"
				/>
			</div>
		</div>
		<div class="contact">
			<div class="feedtext">联系方式(选填)</div>
			<div class="textarea">
				<input
					v-model="form.contactWay"
					placeholder-style="color:#bebebe"
					placeholder="请填写您的联系方式，以便于我们与您联系"
				/>
			</div>
		</div>
		<button type="primary" class="button" @click="submitForm">提交</button>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			type: 1,
			typeList: [],
			form: {
				content: "",
				contactWay: "",
			},
		}
	},
	methods: {
		init() {
			this.getTypeList()
		},
		onchangeType(type) {
			this.type = type
		},
		async getTypeList() {
			const data = await this.$axios.get("/api/system/dict/listByCode?code=feedback")
			this.typeList = data
		},
		async submitForm() {
			try {
				await this.$axios.post("/api/system/feedback/save", {
					content: this.form.content, // 反馈内容
					typeId: this.type, // 反馈类型
					contactWay: this.form.contactWay, //联系方式
				})
				this.toPage("/pages/mine/feedbackSumbit")

				uni.showToast({
					title: error,
					icon: "none",
				})
			} catch (error) {
				uni.showToast({
					title: error,
					icon: "none",
				})
			}
		},
	},
}
</script>
<style lang="scss" scoped>
::v-deep uni-textarea {
	width: 100%;
	height: 250rpx;
}
.content {
	height: 100%;
	background: #f9f9f9;
}
.padding {
	padding: 0 32rpx 0 40rpx;
}
.tip {
	height: 75rpx;
	background-color: #fdfdc9;
	color: $color;
	line-height: 75rpx;
	font-size: 26rpx;
}
.list {
	background-color: #fff;
	.item {
		padding: 28rpx 0 28rpx 20rpx;
		border-bottom: 2px solid #f9f9f9;
		margin: 10rpx 0;
		border-radius: 10rpx;
		&.active {
			background-color: #fdfdc9;
			color: $color;
		}
	}
}
.feeddes {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 40rpx 32rpx 40rpx 40rpx;
	.feedtext {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
}
.contact {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 40rpx 32rpx 40rpx 40rpx;
	.feedtext {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
}
.button {
	background-color: #476bff;
	border-radius: 40rpx;
	margin: 40rpx;
}
</style>
